<template>
    <div style="position: relative;display: flex;flex-direction: column;width: 340px;background: white;border-left: 1px solid #EAEDF3;">
        <div id="search" style="padding:24px 30px;border-bottom: 1px solid #EAEDF3;">
            <div style="font-size: 18px;">事件设置</div>
            <div style="font-size: 14px;color: #9EA0A5;margin-top: 4px">事件的相关设置</div>
        </div>
        <div style="flex: 1;padding: 24px 30px;overflow-y: auto">
            <div style="margin-bottom: 16px">
                <div style="font-size: 12px;font-weight: 500;color: #9EA0A5;margin-bottom: 7px">
                    事件名称
                </div>
                <a-input style="height: 38px" v-model="settings.eventTitle"/>
            </div>
            <div style="margin-bottom: 16px">
                <div style="font-size: 12px;font-weight: 500;color: #9EA0A5;margin-bottom: 7px">
                    报名结束日期
                </div>
                <a-date-picker showTime format="YYYY-MM-DD HH:mm:ss"
                               v-model="settings.eventDeadTime"
                               @change="dateChange"
                               style="width: 100%"></a-date-picker>
            </div>
            <div style="margin-bottom: 26px">
                <div style="font-size: 12px;font-weight: 500;color: #9EA0A5;margin-bottom: 7px">
                    报名最大人数
                </div>
                <a-input-number :min="1" style="width: 100%" v-model="settings.maxSize"/>
            </div>

            <div style="margin-bottom: 26px">
                <div style="font-size: 12px;font-weight: 500;color: #9EA0A5;margin-bottom: 12px">
                    通知提醒
                </div>
                <div style="margin-bottom: 8px">
                    <a-checkbox style="color:#6B6C6F;font-size: 14px">邮件通知</a-checkbox>
                </div>
                <div>
                    <a-checkbox style="color:#6B6C6F;font-size: 14px">系统通知</a-checkbox>
                </div>
            </div>
            <div style="margin-bottom: 26px">
                <div style="font-size: 12px;font-weight: 500;color: #9EA0A5;margin-bottom: 12px">
                    团队类型
                </div>
                <a-radio-group v-model="settings.eventType">
                    <a-radio :value="1" disabled>个人项目</a-radio>
                    <a-radio :value="2" disabled>团队项目</a-radio>
                </a-radio-group>
            </div>
            <div>
                <div style="font-size: 12px;font-weight: 500;color: #9EA0A5;margin-bottom: 12px">
                    标题图像
                </div>
                <div style="position: relative;">
                    <div style="border-radius: 5px;height: 140px;background: #9ea0a5;border: 1px solid #EAEDF3;overflow: hidden">
                        <img :src="settings.titleImg" height="100%" width="100%" style="object-fit: cover;"
                             alt="标题">
                    </div>
                    <a-popover trigger="click" placement="bottom">
                        <a-upload slot="content"
                                  action="http://localhost:9090/uploadFile"
                                  name="upload"
                                  @change="uploadChange"
                                  :showUploadList="false" style="width: 100px;display: block">
                            <a @click="upload">点击上传</a>
                        </a-upload>
                        <a-tag color="#202428"
                               style="z-index: 9;position: absolute;left: 10px;bottom: 10px">编辑
                        </a-tag>
                    </a-popover>
                </div>
            </div>
        </div>
        <div style="height: 69px;display: flex;padding: 0 30px">
            <my-button @click="updateEvent" color="green">保存</my-button>
            <my-button>删除</my-button>
        </div>
    </div>
</template>

<script>
    import moment from 'moment';

    export default {
        name: 'EventSettingBar',
        data () {
            return {
                settings: {
                    eventId: null,
                    eventTitle: null,
                    eventDeadTime: moment(),
                    maxSize: null,
                    eventType: null,
                    titleImg: null,
                },
            };
        },
        methods: {
            copyData (data) {
                this.settings.eventId = data.eventId;
                this.settings.eventTitle = data.eventTitle;
                this.settings.maxSize = data.eventMaxSize;
                this.settings.eventType = data.eventType;
                this.settings.titleImg = data.imgPath;
                if (data.eventDeadTime) {
                    this.settings.eventDeadTime = moment(data.eventDeadTime);
                }
            },
            uploadChange (data) {
                if (data.file.percent===100&&data.file.response) {
                    this.settings.titleImg = data.file.response.url;
                }
            },
            upload () {

            },
            updateEvent () {
                const updateData = {
                    eventId: this.settings.eventId,
                    eventTitle: this.settings.eventTitle,
                    eventMaxSize: this.settings.maxSize,
                    eventDeadTime: this.settings.eventDeadTime.valueOf(),
                    eventContent: this.$parent.editorData,
                };
                this.$apis.updateEvent(updateData).then((data) => {
                    console.log(data);
                });
            },
            dateChange (data) {
                console.log(data.valueOf());
            },
        },
    };
</script>

<style scoped>

</style>
